<template>
  <div>
    <van-nav-bar
      title="历史记录"
      left-text="返回"
      left-arrow
      @click-left="back()"
    />
    <van-dropdown-menu>
      <van-dropdown-item v-model="datetype" @change="changedate()" :options="option1" />
      <van-dropdown-item v-model="typeid" @change="changetype()" :options="option2" />
    </van-dropdown-menu>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
        >
          
          <div class="SimpleBoxList"  >
            <template v-for="item in list">
              <div class="datehead" v-if="dateheadid.indexOf(item.typeid+'|'+item.targetid)>-1" :key="item.typeid+'|'+item.targetid+'|date'">
                {{ new Date(item.date).Format("yyyy年MM月dd日")}}
              </div>
              <div class="SimpleBox" :key="item.typeid+'|'+item.targetid" >
                <div class="title">
                  <span class="left">{{item.type}}</span>
                  <span class="right">成功</span>
                </div>
                <div class="date">
                  <span class="left">{{new Date(item.date).Format("MM月dd日 hh:mm")}}</span>
                  <span class="right"></span>
                </div>
                <div class="info">
                  <span class="left">{{item.title}}</span>
                  <span class="right">
                    <van-button color="#3A71A8" size="small" plain>待定</van-button>
                  </span>
                </div>
              </div>
            </template>
          </div>
        </van-list>
      </van-pull-refresh>

  </div>
</template>

<script>
import { getuserlog } from "@/api/mixin";
import {dateFormat} from '@/utils/util';
export default {
  name: "userlog",
  data() {
    return {
      datetype: 0,
      typeid: 0,
      option1: [
        { text: "全部日期", value: 0 },
        { text: "本周", value: 1 },
        { text: "本月", value: 2 },
        { text: "本年", value: 3 },
      ],
      option2: [
        { text: "全部类型", value: 0 },
        { text: "文字识别", value: 2 },
        { text: "抖音", value: 1 },
      ],
      fixed:true,
      list: [],
      loading: false, //false加载完成 true加载中
      finished: false,  //全部加载完成
      refreshing: false, //刷新中
      error: false, //是否具有错误
      pagesize:10, //每次获取的记录数
      pageindex:1, //默认第1页
      running:false, //防止重复点击
      datehead:[],
      dateheadid:[],
    };
  },
  methods:{
    changedate(){
      this.refreshing = true;
      this.onRefresh();//可能后期会加防抖来限制触发频率
    },
    changetype(){
      this.refreshing = true;
      this.onRefresh();
    },
    back(){
      this.$router.go(-1);
    },
    async onLoad() {  //加载sidebar
      if(this.running){
        Toast.fail('系统繁忙，请稍后再试');
        return
      }

      //下拉刷新，多一步清空list 
      if (this.refreshing) {
          this.pageindex = 1;
          this.list = [];
          this.refreshing = false;
      }

      await getuserlog(this.pagesize,this.pageindex,this.datetype,this.typeid)
        .then(res=>{
          let data = res.data;

          //非空 本次数据还未取完
          if(data.TotalCount !=0 && this.pageindex<data.TotalPage ){
            data.pagedata.forEach(element => {
              this.list.push(element);
              let fmtdate = dateFormat(new Date(element.date),"yyyy-MM-dd");
              if(this.datehead.indexOf(fmtdate)<0){
                this.datehead.push(fmtdate);
                this.dateheadid.push(element.typeid+'|'+element.targetid);
              }
            });
            
            this.loading =false;
            this.pageindex = this.pageindex+1;
          }else if(data.TotalCount !=0 && this.pageindex==data.TotalPage ){
            //非空 本次数据已取完
            data.pagedata.forEach(element => {
              this.list.push(element);
              let fmtdate = dateFormat(new Date(element.date),"yyyy-MM-dd");
              if(this.datehead.indexOf(fmtdate)<0){
                this.datehead.push(fmtdate);
                this.dateheadid.push(element.typeid+'|'+element.targetid);
              }
            });
            this.loading =false;
            this.finished =true;
            this.pageindex = this.pageindex+1;
          }else{
            //kong 在catch处理
            this.loading =false;
            this.finished =true;
          }
          this.running = false;
        })
        .catch(err=>{
          this.error=true;
          this.loading=false;
          this.running = false;
        })

    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.datehead.splice(0,this.datehead.length);
      this.onLoad();
    },
  }
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{width:0;}
  
  .SimpleBoxList{
    margin:30px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    & .datehead{
      color: #8c8c8c;
      font-size: 14px;
      text-align: left;
      height: 30px;
    }
    & .SimpleBox{
      margin-bottom: 14px;
      border-radius: 10px;
      flex: 0 110px;
      box-shadow: 5px 5px 10px #888888;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      & .title{
        flex: 0 36px;
        line-height: 36px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-sizing: border-box;
        & .left{
          font-size: 17px;
          color: #000000;
          font-weight: 600;
        }
        & .right{
          font-size: 14px;
          color: #8a8a8a;
        }
      }
      & .date{
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        & .left{
          font-size: 14px;
          color: #000000;
        }
        & .right{
          font-size: 14px;
          color: #000000;
        }
      }
      & .info{
        flex: 1 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        & .left{
          @include ellipsis-2();
          flex:0 60%;
          font-size: 14px;
          color: #8a8a8a;
          // display: flex;
          // flex-direction: column;
          // align-items: center;
          // overflow: hidden;
        }
        & .right{
          font-size: 14px;
          color: #000000;
        }
      }
      
    }
  }
</style>